<template>
  <div class="">
    <div class="add">
      <el-button type="success" @click="addAd">添加</el-button>
    </div>
    <div class="box">
    
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="PC图片">
              <img class="pc" :src="props.row.add_img" />
            </el-form-item>
            <el-form-item label="WAP图片">
              <img class="wap" :src="props.row.add_img" />
            </el-form-item>
            <el-form-item label="网址">
              <span>{{ props.row.add_http}}</span>
            </el-form-item>
            <el-form-item label="操作">
              <!-- <input type="button" class="changed btn" @click="changed(props.row._id)" value="修改"> -->
              <el-button type="success" @click="changed(props.row._id)">修改</el-button>
              <el-popover placement="top" width="160"  v-model="visible">
                <p>该删除为永久删除，确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="delet(props.row._id)">确定</el-button>
                </div>
                <el-button type="danger" slot="reference">删除</el-button>
              </el-popover>
              <!-- <input type="button" class="delet btn" @click='delet(props.row._id)' value="删除"> -->
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="add_name" ></el-table-column>

      <el-table-column label="描述" prop="add_msg"></el-table-column>
    </el-table>
   
  </div>
  <div class="">
     <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      pagesize: 3,
      total: 1,
      pageone: 1,
      visible: false
    };
  },
  mounted() {
    this.getmsg();
  },
  methods: {
    handleCurrentChange(val) {
      this.pageone = val;
      this.getmsg();
    },
    page(val) {
      this.pageone = val;
    },
    addAd() {
      this.$router.push("/All/AddAd");
    },
    delet(_id) {
      Axios.get("/ads/delet", { params: { _id: _id } }).then(res => {
        if (res.data) {
          this.getmsg();
        }
      });
    },
    changed(_id) {
      this.$router.push(`/All/AdChanged/${_id}`);
    },
    getmsg() {
      const a = { pagesize: this.pagesize, pageone: this.pageone };
      Axios.get("/ads/getad", { params: a }).then(res => {
        res.data.datas.map(
          (item, index) => (item.add_img = item.add_img.substr(6))
        );

        this.tableData = res.data.datas;
        this.total = res.data.das;
      });
    }
  }
};
</script>

<style>
.add {
  width: 100px;
  margin-bottom: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.pc {
  width: 300px;
}
.wap {
  width: 200px;
}

</style>